<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的基本使用</title>
    <script src="axios.js"></script>
</head>
<body>
<button>发送GET请求</button>
<button>发送POST请求</button>
<button>发送PUT请求</button>
<button>发送DELETE请求</button>
</body>
<script>
    const btn = document.querySelectorAll('button')
    btn[0].addEventListener('click', function () {
        axios({
            //请求类型
            method: 'GET',
            //URL
            url: 'http://localhost:3000/posts/2'
        }).then(
            response => {
                console.log(response.data)
            },
            error => {
                console.log(error)
            }
        )
    })


    btn[1].addEventListener('click', function () {
        axios(
            {
                method: 'POST',
                url: 'http://localhost:3000/posts',
                data: {
                    "id": "3",
                    "title": "add new title3",
                    "views": 300
                }
            }
        ).then(response => {
            console.log(response)
        })
    })


    btn[2].addEventListener('click', function () {
        axios(
            {
                method: 'PUT',
                url: 'http://localhost:3000/posts/3',
                data: {
                    "id": "3",
                    "title": " put add new title3",
                    "views": 3200
                }
            }
        ).then(response => {
            console.log(response)
        })
    })


    btn[3].addEventListener('click', function () {
        axios({
            //请求类型
            method: 'DELETE',
            //URL
            url: 'http://localhost:3000/posts/3'
        }).then(
            response => {
                console.log(response.data)
            },
            error => {
                console.log(error)
            }
        )
    })


</script>
</html>